<template>
  <div class="preview">
    <div class="header">
      <p class="YouSheBiaoTiHei">
        {{ name }}
      </p>
    </div>
    <div class="main-content">
      <div class="scroll-parent">
        <el-scrollbar>
          <div class="main-grid">
            <div
              v-for="item in getMainList"
              :key="item.id"
              class="grid-item"
              :style="gridArea(item.normsVal)"
            >
              <iframe v-if="load" :src="item.component" frameborder="0" />
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { getGridData, getFormData } from './composables'

// 拖拽数据
const { mainList, name } = toRefs(getFormData().value)
const getMainList = computed(() => {
  let slice = 0
  mainList.value.forEach((item, index) => {
    if (item.component) {
      slice = index
    }
  })
  return mainList.value.slice(0, slice + 1)
})

// 获取grid参数
const { load, gridArea, client } = getGridData('.preview .scroll-parent')
</script>

<script lang="ts">
export default {
  name: 'Preview'
}
</script>
<style lang="scss" scoped>
  .preview {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #161D26;
    .header {
      color: #fff;
      height: 60px;
      width: 100%;
      background: url('@/assets/temp/header.png') 0 0 no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      p {
        display: flex;
        align-items: center;
        font-size: 44px;
        letter-spacing: 1px;
        // background: linear-gradient(to bottom, #fff, #B4CFF2);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }
    }
    .main-content {
      flex: 1;
      padding: v-bind("client.gap + 'px'");
      padding-bottom: 0;
      overflow: hidden;
      .scroll-parent {
        width: 100%;
        height: 100%;
      }
      .main-grid {
        width: max-content;
        min-width: 100%;
        height: 100%;
        display: grid;
        box-sizing: border-box;
        grid-template-columns: repeat(auto-fill, v-bind("client.w + 'px'"));
        grid-template-rows: repeat(v-bind("client.scale"), v-bind("client.h + 'px'"));
        grid-auto-columns: v-bind("client.w + 'px'");
        grid-auto-rows: v-bind("client.h + 'px'");
        grid-auto-flow: column dense;
        grid-gap: v-bind("client.gap + 'px'");
        .grid-item {
          position: relative;
          width: 100%;
          height: 100%;
          cursor: pointer;
          &:hover, &.active {
            .item-control {
              display: flex;
            }
          }
          .item-img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
          > iframe {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
